<template>
  <div class="constant-list">
    <p class="filter-board clearfix">
      <Button class="update-btn" type="primary" @click="addData">新增</Button>
    </p>
    <Table
      class="business-tmp-table"
      :columns="tableColumns"
      :data="tableData"
      :no-data-text="noData"
      ></Table>

    <!-- <div class="page-box">
      <Select
        @on-change="getTableData"
        v-model="pageSize"
        class="page-box-size">
        <Option v-for="item in pageSizeList" :key="item" :value="item" :label="`${item}条/页`">
          {{item}}条
        </Option>
      </Select>
      <Page
        show-elevator
        show-total
        :current="page"
        :total="pageTotal"
        :page-size="pageSize"
        class="page-box-page"
        @on-change="(number) => getTableData(number)"></Page>
    </div> -->
    <Modal
      class="add-enum-modal"
      v-model="addModalShow"
      title="新增数据"
      :closable="false"
      :mask-closable="false"
      :transfer="false"
      >
      <Form
        class="create-enum-form"
        ref="newConstForm"
        :model="newConstForm"
        :rules="newConstFormRules"
        label-position="left"
        :label-width="100"
        >
        <FormItem label="名称" prop="constName">
          <Input v-model="newConstForm.constName" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="描述" prop="constDesc">
          <Input type="textarea" :rows="2" v-model="newConstForm.constDesc" placeholder="请输入描述"></Input>
        </FormItem>
        <FormItem label="类型" prop="constClass">
          <Select v-model="newConstForm.constClass">
            <Option v-for="item in typeDict" :key="item.dictKey" :value="item.dictKey">{{ item.dictName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="值" prop="constValue">
          <Input v-model="newConstForm.constValue" placeholder="请输入值"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelNewConstModal">取消</Button>
        <Button type="primary" @click="certainNewConstModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { showMessageTip } from '@/libs/util'
import { queryConstApi, createConstApi, updateConstApi, deleteConstApi } from '@/api/data-management'
export default {
  name: 'constant_list',
  data () {
    return {
      tableColumns: [],
      tableData: [],
      noData: '加载中...',
      selectList: [], // 表格选中行内容

      // 分页相关
      page: 1,
      pageSize: 40,
      pageTotal: 0,
      pageSizeList: [10, 20, 30, 40],
      // 新建modal框相关
      addModalShow: false,
      newConstForm: {
        constName: '',
        constDesc: '',
        constClass: '',
        constValue: ''
      },
      newConstFormRules: {
        constName: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }],
        constClass: [{
          required: true,
          message: '类型不能为空',
          type: 'string',
          trigger: 'change'
        }],
        constValue: [{
          required: true,
          message: '值不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    typeDict () {
      const filterList = this.$store.state.app.dictList.filter(item => item.id === 198)[0]
      const result = filterList && filterList.children ? filterList.children : []
      return result
    }
  },
  methods: {
    addData () {
      this.newConstForm = {
        constName: '',
        constDesc: '',
        constTypeId: '',
        constValue: ''
      }
      this.$refs.newConstForm.resetFields()
      this.addModalShow = true
    },
    // 设置表头
    setTableColumns () {
      this.tableColumns = [
        {
          key: 'constId',
          title: '常量ID'
        }, {
          key: 'constName',
          title: '名称'
        }, {
          key: 'constDesc',
          title: '描述'
        }, {
          key: 'constValue',
          title: '值'
        }, {
          key: 'constClass',
          title: '类型'
        }, {
          key: 'createBy',
          title: '创建人'
        }, {
          key: 'createAt',
          title: '创建时间',
          render: (h, { row }) => {
            return (
              <span>{ dayjs(row.createAt).format('YYYY-MM-DD HH:mm:ss') }</span>
            )
          }
        }, {
          key: 'option',
          title: '操作',
          render: (h, { row }) => {
            const self = this
            const Divider = 'Divider'
            return (
              <span>
                <a onClick={ () => self.handleEdit(row) } >编辑</a>
                <Divider type="vertical" />
                <a style={{ color: 'red' }} onClick={ () => self.handleDelete(row) }>删除</a>
              </span>
            )
          }
        }
      ]
    },
    submitConstForm () {
      // 编辑
      if (this.newConstForm.constId) {
        updateConstApi(this.newConstForm.constId, this.newConstForm).then((res) => {
          showMessageTip(this, res.data.code, '更新成功', res.data.msg || '更新失败，请重试')
          if (res.data.code === 2000) {
            this.getTableData()
            this.addModalShow = false
          }
        })
      } else {
        const data = this.newConstForm
        createConstApi(data).then((res) => {
          const code = res.data.code
          const successText = '新建成功'
          const errorText = res.data.msg || '新建失败，请重试'
          showMessageTip(this, code, successText, errorText)
          if (code === 2000) {
            this.addModalShow = false
            this.getTableData()
          }
        })
      }
    },
    /**
     * 列表-操作-编辑
     * @param {row} 点击行数据
      */
    handleEdit (row) {
      this.$refs.newConstForm.resetFields()
      this.newConstForm = JSON.parse(JSON.stringify(row))
      this.addModalShow = true
    },
    /**
     * 列表-操作-删除
     * @param {row} 点击行数据
      */
    handleDelete (row) {
      this.$Modal.confirm({
        title: '删除常量',
        content: '<p>确定删除此条常量？</p>',
        onOk: () => {
          deleteConstApi(row.constId).then((res) => {
            showMessageTip(this, res.data.code, '删除成功', res.data.msg || '删除失败，请重试')
            if (res.data.code === 2000) this.getTableData()
          })
        }
      })
    },
    // 获取表格数据
    getTableData (number) {
      // const pageParmas = {
      //   page: number || this.page,
      //   size: this.pageSize
      // }
      this.tableData = []
      this.noData = '加载中...'
      queryConstApi().then((res) => {
        if (res.data.code === 2000) {
          // this.pageTotal = res.data.data.total
          this.tableData = res.data.data
          // this.noData = res.data.data.total ? '' : '未查询到数据'
        } else {
          this.$Message.error({
            content: res.data.msg || '加载失败，请重试',
            duration: 4
          })
        }
      })
    },
    // 新增modal框取消按钮
    cancelNewConstModal () {
      this.addModalShow = false
    },
    // modal框确定按钮
    certainNewConstModal () {
      this.$refs.newConstForm.validate((valid) => {
        if (valid) {
          this.submitConstForm()
        }
      })
    }
  },
  activated () {
  },
  mounted () {
    this.setTableColumns()
    this.getTableData()
  }
}
</script>

<style lang="less">
  .constant-list {
    padding-bottom: 40px;
    .filter-board {
      padding-bottom: 16px;
      .update-btn {
        float: right;
      }
    }
  }
</style>
